<!-- 待机资源 -->
<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="资源标题">
              <el-input v-model="pageData.query.title" placeholder="请输入" clearable />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button
            type="primary"
            plain
            icon="plus"
            @click="$router.push({ path: `${$route.path}/edit`, query: { rootPath: $route.path } })"
          >
            添加
          </el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column prop="rank" label="序号" :formatter="onFormatter" />
        <!-- <el-table-column prop="roomNo" label="编号" /> -->
        <el-table-column prop="title" label="资源标题" />
        <el-table-column prop="location" label="文件类型">
          <template #default="{ row }">
            {{ row.type === 'video' ? '视频' : row.type === 'image' ? '图片' : '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.isOpen"
              :before-change="
                () => {
                  pageActions.handleUpdate(
                    row,
                    { isOpen: !row.isOpen },
                    !row.isOpen ? '确认上线？' : '确认下线？',
                    '已修改'
                  )
                }
              "
            />
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="updatedAt" label="更新时间" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              icon="edit"
              @click="
                $router.push({ path: `${$route.path}/edit`, query: { id: row.id, rootPath: $route.path } })
              "
            >
              编辑
            </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>
  </app-page>
</template>

<script setup>
import { usePageList } from 'jax-node'

const { pageData, pageActions, onFormatter } = usePageList()
</script>
